<template>
	<Form :model="formData">
		<FormItem label="角色名" label-position="top">
			<Input v-model="formData.name" placeholder="请输入角色名称" />
		</FormItem>
		
		<FormItem label="角色标识" label-position="top">
			<Input v-model="formData.remark" placeholder="请输入角色标识,推荐使用全大写,多个单词使用下划线分割.所有的角色会自动添加ROLE_作为前缀" />
		</FormItem>
		
		<FormItem label="角色描述" label-position="top">
			<Input type="textarea" v-model="formData.description" :rows="4" placeholder="请输入角色描述信息" />
		</FormItem>

    <FormItem label="状态" label-position="top">
      <Switch size="large" v-model="formData.status">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>

    <div>
      是否设置为默认角色
      <Tooltip content="开启后,新注册用户默认使用该角色">
        <Icon type="ios-help-circle" size="20"/>
      </Tooltip>
    </div>
    <Switch v-model="formData.defaultRole">
      <template #open>
        <Icon type="md-checkmark"></Icon>
      </template>
      <template #close>
        <Icon type="md-close"></Icon>
      </template>
    </Switch>
	</Form>
	
	<div class="demo-drawer-footer">
		<Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
		<Button type="primary" @click="saveOrUpdateRole">保存</Button>
	</div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      required: false,
      default: {}
    }
  },
	data() {
		return {
			formData: {
				name: this.row.name,
				description: this.row.description,
				remark: this.row.remark,
				status: this.row.status ?? true ,
        defaultRole: this.row.defaultRole ?? false ,
			},
		}
	},
	emits: ["close-win"],
  methods: {
    saveOrUpdateRole() {
       // 验证参数
       if (this.formData.name == null || this.formData.name === "") {
         this.$Message.error({background: true, content: "角色名为空"});
         return false;
       }
       if (this.formData.remark == null || this.formData.remark === "") {
        this.$Message.error({background: true, content: "角色标识符为空"});
        return false;
       }

       // 判断是 新增还是 删除
       if (this.row.id == null) {
          // 完成 角色的添加
          this.$api.addRole(this.formData).then(({data:ret})=> {
             if (ret.status === "10000") {
               this.$Message.success({background: true, content: "数据保存成功"});
               this.$emit('close-win', true) ;
             }else{
               this.$Message.error({background: true, content: ret.message});
             }
          })
       }else{
         this.$api.modifyRole({...this.formData, id: this.row.id}).then(({data:ret})=> {
           if (ret.status === "10000") {
             this.$Message.success({background: true, content: "数据修改成功"});
             this.$emit('close-win', true) ;
           }else{
             this.$Message.error({background: true, content: ret.message});
           }
         })
       }
    }
  }
}
</script>

<style scoped>
.demo-drawer-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>